<template>
  <!-- 帖子详情 -->
  <div class="info">
    <ElCard>
      <template #header>
        <div>
          <ElAvatar v-if="info.userInfo && info.userInfo.img" :src="info.userInfo.img"></ElAvatar>
        </div>
        <div>{{ info.user?.username }}</div>
        <div> {{ info.title }}</div>
        <div> {{ Tools.formatDate(info.lastupdate) }} </div>
      </template>
      <div>
        <div v-html="info.info"></div>
      </div>
    </ElCard>
  </div>
  <!-- 回贴 -->
  <div class="info">
    <ElInput type="textarea" v-model="reply_info.info" placeholder="回复内容"></ElInput>
    <ElButton type="primary" @click="reply">回复</ElButton>
  </div>

  <!-- 回帖的信息列表 -->
  <div style="width: 80vw; margin: 1rem auto">
    <div>
      <ElCard v-for="d in list" style="margin: 1rem 0px">
        <template #header>
          {{ d.user?.username }}({{ d.user?.nickname }})
        </template>
        <div>
          {{ d.info }}
          <hr />
          {{ Tools.formatDate(d.lastupdate) }}
        </div>
      </ElCard>
    </div>
  </div>

  <div>
    <PageComp :page="page" @page-change="query"></PageComp>
  </div>
</template>

<script lang="ts" setup>
import { ElAvatar, ElButton, ElCard, ElInput, ElMessageBox } from 'element-plus'
import { ApiService } from '../../ts/ApiService'
import { Tools } from '../../ts/Tools'
import { PageInfo } from '../../ts/BaseResult'

import { useRoute } from 'vue-router'
import { ref } from 'vue'
import PageComp from '../../components/PageComp.vue'
const route = useRoute()
const umid = route.params.id
const reply_info = ref({
  umid: umid,
  info: '',
})

// 回帖的信息
const page = ref(new PageInfo())
const list = ref([])
// 留言详情
const info = ref({})
const queryInfo = ref({
  umid: umid,
  orderBy: 1,
})

function query() {
  ApiService.post('/message/queryDetail', 
    Tools.concatJson(page.value, queryInfo.value)
  , (data: any) => {
    if (data.success) {
      info.value = data.info
      page.value = data.page
      list.value = data.list
    }
  })
}

function reply() {
  ApiService.post('/message/addReply', reply_info.value, (data) => {
    ElMessageBox.alert(data.message).then(query)
  })
}

query()
</script>

<style lang="scss" scoped>
.info {
  display: flex;
  width: 80vw;
  margin: 1rem auto;
}
</style>
